<template>
	<view class="pagebox pd30">
		<template v-if="obj.d">
			<view class="flex-column">
				<view class="problem_chart">
					{{obj.d.q}}
				</view>
				<view class="answer_chart flex-column">
					<zero-markdown-view :markdown="obj.d.a"></zero-markdown-view>
					<view class="recommends flex-column" v-if="obj.d.other&&obj.d.other.length">
						<view v-if="obj.types[obj.d.type].recommendDesc" class="recommendDesc">{{obj.types[obj.d.type].recommendDesc}}</view>
						<view class="name mt10" v-for="(v,i) in obj.d.other" :key="i" @click="changeRecommend(v)">{{v.name}}</view>
					</view>
					<view v-if="obj.d.other&&obj.d.other.length" class="desc">内容由大模型生成，不能完全保障真实</view>
				</view>
				<view class="desc pd20-row">会话时间：{{obj.d.intime}}</view>
			</view>
		</template>
	</view>
</template>

<script setup>
    import { reactive, getCurrentInstance,onMounted,watch } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
    let { proxy } = getCurrentInstance()
	let obj = reactive({
		id: '',
		d: null,
		types: {
			0: {recommendDesc: '关于丝网问题，大家最热门的问题如下：'},
			1: {recommendDesc: '根据目前的产品清单，帮你推荐如下产品：'},
			2: {recommendDesc: ''}
		}
	})
	
	onLoad((opt)=>{
		obj.id = opt.id
		getdetail()
	})
	
	const getdetail=()=>{
		uni.showLoading({title: '获取中...'})
		proxy.$reQuest.post('mp/user/chat/get',{chat_id:obj.id},{token: true},).then(res=>{
			uni.hideLoading()
			if(res.success){
				obj.d = res.msg||{}
			}
		}).catch(err=>{uni.hideLoading()})
	}
	
	const changeRecommend=(v)=>{
		if(obj.d.type==0){
			proxy.$c.go_url(`/pages/index/index?chatMsg=${v.name}`)
		}else if(obj.d.type==1){
			proxy.$c.go_url(`/pages/productDetail?id=${v.id}`)
		}else if(obj.d.type==2){
			
		}
	}
</script>

<style lang="scss">
.pagebox{
	font-size: 26rpx;
	.problem_chart{
		width: fit-content;max-width: 690rpx;height: auto;display: inline-flex;background: #1773E5;border-radius: 0rpx 18rpx 18rpx 18rpx;color: #fff;
		padding: 20rpx 30rpx;box-sizing: border-box;margin-bottom: 40rpx;
	}
	.answer_chart{
		width: auto;max-width: 690rpx;height: auto;display: inline-flex;background: linear-gradient( 82deg, #F5F6F8 0%, #F5F6F8 100%);box-shadow: 0rpx 0rpx 9rpx 0rpx #EDF0F5;border-radius: 0rpx 25rpx 25rpx 25rpx;border: 1rpx solid #E1E8F8;
		padding: 20rpx;box-sizing: border-box;margin-bottom: 10rpx;
		.recommends{
			padding: 20rpx;border-radius: 10rpx;background: #ECEDF0;margin-bottom: 10rpx;
			font-size: 26rpx;
			.recommendDesc{
				color: #999;margin-bottom: 10rpx;
			}
			.name{
				color: #1773E5;
			}
		}
		.desc{width: 100%;text-align: right;font-size: 22rpx;color: #999;}
	}
	.desc{width: 100%;text-align: right;font-size: 22rpx;color: #999;}
}
</style>
